Skip to main content

​
Custom MCP Integrations

Expand what your build agent can do by connecting external services through Model Context Protocol (MCP) integrations. These integrations help the AI create better apps by giving it access to additional tools and resources during the build process.
Build Agent Integration: These integrations are used by CREAO’s build agent to help create your apps. This is different from app integrations (like APIs) that your built apps can use after they’re created.

​
Overview

Build agent integrations extend what your build agent can do during app creation. There are two main types:

​
Official Integrations

Import Figma Designs

The most popular build agent integration - import and implement Figma designs directly into your apps. See the complete guide for setup instructions and usage examples.

​
Custom MCP Services

Beyond official integrations like Figma, you can register custom MCP services to extend your build agent with additional capabilities like content generation, documentation search, and proprietary tools. MCP Registration

​
Register Custom MCP Integrations

Connect custom MCP services to extend your build agent with additional capabilities. Choose the method that fits your setup:

​
HTTP Method (Remote Service)

Use this method when your custom MCP is deployed on a remote server and accessible via HTTP protocol.
1

Select Custom Plugin

Navigate to the MCP registration page and select “Custom Plugin” then choose “HTTP.”HTTP Method Selection
2

Configure Service Details

Enter the configuration for your remote MCP service:
  • URL: The publicly accessible address of your MCP service (e.g., https://api.example.com/custom-mcp)
  • Headers: HTTP request headers including authentication tokens and content types as required by your service
URL ConfigurationHeader Configuration
3

Test Connection

Click “Add” to register the MCP, then click “Test” to verify the remote service is reachable.Add Custom MCPTest Connection

​
Local Command Method (Local Execution)

Use this method when your MCP needs to run locally within the builder’s environment, ideal for sensitive data processing or local resource access.
1

Select Local Execution

Navigate to the MCP registration page and select “Custom Plugin” then choose “stdio.”Local Method Selection
2

Configure Local Command

Enter the configuration for local execution:
  • Command: The execution instruction for running your MCP (e.g., npx -y nano-banana-mcp)
  • Environment Variables: Required environment parameters (e.g., GEMINI_API_KEY=xxx)
Command Configuration
3

Test Local Execution

Click “Add” to register the MCP, then click “Test” to verify the command executes successfully.

​
Using Build Agent Integrations

​
Reference Integrations in Build Prompts

Once registered, reference your MCP services directly in your build prompts to leverage their capabilities during app creation.

​
Example Build Prompts

Figma Design Import: 
Use the Figma MCP to implement the design from:
https://www.figma.com/file/[your-file-id]/[your-design-name]

Make it responsive and include all the components shown.
Nano Banana for Content Generation: 
Use nanoBanana MCP to generate a picture of a kitten as the background 
of the website. The website showcases interaction diaries with pets 
(fields: title, detailed content). The interaction records support 
CRUD operations.
Context7 for Documentation: 
Through the MCP of context7, search for the usage method of the Echart 
chart component. Generate an app interface of a line chart showing 
temperature changes. Mock some data for the chart first.

​
Build Agent Planning

Your build agent analyzes the requirements and creates a plan that incorporates the registered MCP services based on their capabilities. Nano Banana Planning: Nano Banana Build Plan Context7 Planning: Context7 Build Plan Figma Planning: Figma Build Plan

​
Monitoring MCP Activity

During the build process, detailed information about MCP calls appears in real-time within the operation logs, giving you full visibility into how integrations are being used. Nano Banana Activity: Nano Banana Logs Context7 Activity: Context7 Logs Figma Activity: Figma Logs

​
Build Agent Integration Examples

Design Import

Figma: Import design systems, components, and styles from Figma files during app creation.

Content Generation

Nano Banana: Generate AI-powered images and visual content while building your apps.

Documentation Access

Context7: Search library documentation and implement components with proper usage patterns during development.

Custom Tools

Custom MCPs: Integrate proprietary tools and services that extend your build agent’s capabilities for specific workflows.

​
Build Agent vs App Integrations

Understanding the difference between integration types helps you choose the right tools for your needs:

Build Agent Integrations

Used during app creation
  • Figma Design Import
  • Custom MCP services
  • Help the AI build your app
  • Configure once, use in all projects
  • Examples: Design references, code templates, documentation search

App Integrations

Used by your built apps
  • APIs and database connections
  • MCP Servers for runtime features
  • Add functionality to finished apps
  • Configure per app as needed
  • Examples: Payment processing, email services, external APIs